<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>遮罩层</title>
		<style type="text/css">
			.bigbox{
				position: relative;
				width: 500px;
				height: 500px;
				border: 1px solid #000000;
				margin: 0 auto;
				cursor: pointer;
			}
			img{
				width: 500px;
				height: 500px;
				
			}
			.zzc{
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				display: none;
				background-color: rgba(0,0,0,.5);
			}
			.bigbox:hover .zzc{
				display: block;
			}
			.sjx{
				width: 0;
				height: 0;
				border: 20px solid  transparent;
				border-bottom:130px solid #B3D4FC;
				cursor: not-allowed;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div class="zzc"></div>
			<img src="../img/ali.jpg"/>
			
		</div>
		<div class="sjx"></div>
	</body>
</html>
